<!DOCTYPE html>
<html lang="en">

<head>
    {include file="common/meta" /}
</head>

<body>
    <div class="x-body">

        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM元素 -->
        <!-- 按分类统计帖子 -->
        <div id="cate" style="width: 100%;height:700px;"></div>


    </div>
</body>

</html>
<script src="/assets/admin/js/echarts.min.js"></script>
<script>
    //获取数据
    var vip = []
    var data = []

    var catelist = `{$catelist}`
    //将json转为 JS 数组
    catelist = JSON.parse(catelist);
    for (key in catelist) {
        vip.push({
            value: key,
            groupId: catelist[key]
        })
        data.push(catelist[key]);
    }
    data.sort()
    //基于准备好的dom，初始化echarts实例
    var chartDom = echarts.init(document.getElementById('cate'));

    var option = {
        xAxis: {
            data: data
        },
        yAxis: {},
        dataGroupId: '',
        animationDurationUpdate: 500,
        series: {
            type: 'bar',
            id: 'sales',
            data: vip,
            universalTransition: {
                enabled: true,
                divideShape: 'clone'
            }
        }
    };
    

    option && chartDom.setOption(option);

</script>